<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-01-17 10:22:05
 * @LastEditors: 陈波
 * @LastEditTime: 2024-01-17 10:39:19
 * @Description: 
 * @FilePath: \graDesign\src\views\Error\errorIndex.vue
-->
<template>
    <div class="bg">
        <div class="errPage-container">
            <el-button 
                :icon="Back" 
                class="pan-back-btn" 
                @click="back"
            >
                返回
            </el-button>
            <el-row>
                <el-col :span="12">
                    <h1 class="text-jumbo text-ginormous">
                        Oops!
                    </h1>
                    <h2>抱歉出错了！</h2>
                    <!-- <h6>如有不满请联系你领导</h6> -->
                    <ul class="list-unstyled">
                        <li class="link-type">
                            <router-link to="/login">
                                回登录页
                            </router-link>
                        </li>
                    </ul>
                </el-col>
                <el-col :span="12">
                    <img
                        :src="errGifVar"
                        width="313"
                        height="428"
                        alt="Girl has dropped her ice cream."
                    />
                </el-col>
            </el-row>
            <el-dialog :visible.sync="dialogVisible" title="随便看">
                <img :src="ewizardClap" class="pan-img" />
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Back } from "@element-plus/icons-vue";
import errGif from "@/assets/images/401_images/401.gif";

const router = useRouter();

// variables
const errGifVar = errGif + "?" + +new Date();
const ewizardClap = "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646";
const dialogVisible = ref<boolean>(false);

// functions
const back = () => {
    router.go(-1);
};

</script>

<style lang="scss" scoped>
.bg {
    width: 100%;
    height: 100%;
    background-color: #efefef;
    // BFC
    display: inline-block;
}
.errPage-container {
    width: 800px;
    max-width: 100%;
    margin: 100px auto;
    .pan-back-btn {
        background: #008489;
        color: #fff;
        border: none !important;
    }
    .pan-gif {
        margin: 0 auto;
        display: block;
    }
    .pan-img {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .text-jumbo {
        font-size: 60px;
        font-weight: 700;
        color: #484848;
        margin: 15px 0;
    }
    .list-unstyled {
        font-size: 14px;
        margin-top: 30px;
        padding-left: 35px;
        li {
            padding-bottom: 5px;
            list-style: inside;
        }
        a {
            color: #008489;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
</style>
